﻿<!DOCTYPE html>
<html>
<head>
    <title>Knockout - Live Example</title>

    <link rel="Stylesheet" type="text/css" href="css/themes/base/jquery.ui.all.css" />
    <link rel="Stylesheet" type="text/css" href="css/sparkline.css" />
</head>
<body>
    <div class="panel view">
        <h1>View:</h1>
        <h2>Hello <span id="greetings-name">World</span>!</h2>
        <div class="diagram">
            <div class="dynamicsparkline">Loading...</div>
            <div class="slider-range"></div>
        </div>
        <div class="selected-date-range">
            <h2>Prices:</h2>
            <div>Open Price: <span class="start"></span></div>
            <div>Close Price: <span class="end"></span></div>
        </div>
        <div class="statistics">
            <h2>Statistics:</h2>
            <div class="statistics-content">
                <div>Min: </div>
                <div>Max: </div>
                <div>Median: </div>
            </div>
        </div>
    </div>
    <div class="panel controller">
        <h1>Controller:</h1>
        <div>
            <span>Name:</span>
            <input type="text" id="name" />
        </div>
        <div>
            <span>Start:</span>
            <input type="text" id="left-handle-position" />
        </div>
        <div>
            <span>End:</span>
            <input type="text" id="right-handle-position" />
        </div>
        <div>
            <input type="checkbox" id="show-chart-data-checkbox" />
            <label for="show-chart-data-checkbox">Show Chart Data</label>
        </div>
        <button id="new-chart-button" type="button">New random chart</button>
    </div>
    <div class="panel chart-data">
        <h1>Chart Data:</h1>
        <table class="data"></table>
    </div>

    <script id="StatisticsTmpl" type="text/html">
        <div>Min: <span class="min">${min}</span></div>
        <div>Max: <span class="max">${max}</span></div>
        <div>Median: <span class="median">${median}</span></div>
    </script>
</body>
</html>
